<div class="row">
    <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
        <h2 class="custom-h2 config-title">{{'CONFIG.TITLE' | translate }}</h2>
        <span class="spinner spinner-inline" [hidden]="inProgress === false"></span>
        <clr-tabs>
                <clr-tab>
                    <button id="config-auth" clrTabLink>{{'CONFIG.AUTH' | translate}}</button>
                    <clr-tab-content id="authentication" *clrIfActive>
                        <config-auth [allConfig]="allConfig"  (refreshAllconfig)="refreshAllconfig()"></config-auth>
                    </clr-tab-content>
                </clr-tab>
                <clr-tab>
                    <button id="config-email" clrTabLink>{{'CONFIG.EMAIL' | translate }}</button>
                    <clr-tab-content id="email" *clrIfActive>
                        <config-email [mailConfig]="allConfig" (refreshAllconfig)="refreshAllconfig()"></config-email>
                    </clr-tab-content>
                </clr-tab>
                <clr-tab>
                    <button id="config-system" clrTabLink>{{'CONFIG.SYSTEM' | translate }}</button>
                    <clr-tab-content id="system_settings" *clrIfActive>
                        <system-settings [(systemSettings)]="allConfig" [hasAdminRole]="hasAdminRole" (reloadSystemConfig)="handleAppConfig($event)" (readOnlyChange)="handleReadyOnlyChange($event)" [hasCAFile]="hasCAFile"></system-settings>
                    </clr-tab-content>
                </clr-tab>
                <clr-tab *ngIf="!withAdmiral">
                    <button id="config-label" clrTabLink>{{'CONFIG.LABEL' | translate }}</button>
                    <ng-template [(clrIfActive)]="labelActive">
						<clr-tab-content id="system_label" *ngIf="!withAdmiral">
                            <hbr-label [scope]="'g'"
                            [hasCreateLabelPermission]="true"
                            [hasUpdateLabelPermission]="true"
                            [hasDeleteLabelPermission]="true"></hbr-label>
						</clr-tab-content>
					</ng-template>
                </clr-tab>
                <clr-tab>
                    <button id="config-system" clrTabLink>{{'CONFIG.PROJECT_QUOTAS' | translate }}</button>
                    <clr-tab-content id="project_quotas" *clrIfActive>
                        <project-quotas [(allConfig)]="allConfig" (refreshAllconfig)="refreshAllconfig()"></project-quotas>
                    </clr-tab-content>
                </clr-tab>
        </clr-tabs>
    </div>
</div>